<template>
  <el-popover v-if="$root.$data.cart != null" placement="top" width="500" trigger="hover">
    <shop-cart-item :pdescw="200" :key="item.id" v-for="item in $root.$data.cart" :data="item"></shop-cart-item>
    <el-badge slot="reference" :value="$root.$data.cart.length">
      <el-button @click="toShopCart" size="small" type="primary" class="iconfont icon-cart">
        购物车
        <span>￥{{getSum()}}</span>
      </el-button>
    </el-badge>
  </el-popover>
</template>

<script>
import shopCartItem from "./shopCartItem";

export default {
  name: "shopCart",
  methods: {
    getSum() {
      let sum = 0;
      this.$root.$data.cart.forEach(v => {
        sum += v.num * (v.product.price * 1000);
      });
      return sum / 1000;
    },
    toShopCart() {
      this.$router.push({ path: "/ShopCart" });
    }
  },
  components: {
    shopCartItem: shopCartItem
  }
};
</script>

<style>
.el-popover {
  max-height: 400px;
  overflow: auto;
}
</style>